<template>
    <div>
        <el-menu class="el-menu-vertical-demo" text-color="#7e7877" :default-active="$route.path"
            active-text-color="#409eff" :collapse="menu" router>
            <el-menu-item>
                <img :src="src" style="width: 100%; height: 100%;">
            </el-menu-item>
            <el-menu-item>
                <i class="el-icon-ice-cream-square"></i>
                <span slot="title">{{ $t('navbar.operationanalysis') }}</span>
            </el-menu-item>
            <!-- <template v-for="(item, index) in this.$router.options.routes.slice(10, 19)">
                <el-submenu :index="index + ''">
                    <template slot="title">
                        <i class="el-icon-location  blue"></i>
                        <span class="chap">{{ item.name }} </span>
                    </template>
                    <el-menu-item-group v-for="(itemone, index) in item.children" :key="index">
                        <el-menu-item :index="itemone.path">{{ itemone.name }}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </template> -->
            <el-submenu index="'/ConTainer/essential'">
                <template slot="title">
                    <i class="el-icon-location  blue"></i>
                    <span class="chap">{{ $t('navbar.essential') }} </span>
                </template>
                <el-menu-item :index="'/ConTainer/essential'">{{ $t('navbar.essential') }}</el-menu-item>

            </el-submenu>
            <el-submenu index="'/ConTainer/Itemstobeapproved'">
                <template slot="title">
                    <i class="el-icon-location  blue"></i>
                    <span class="chap">{{ $t('navbar.Itemstobeapproved') }} </span>
                </template>
                <el-menu-item-group>
                    <el-menu-item :index="'/ConTainer/Itemstobeapproved'">{{ $t('navbar.Itemstobeapproved')
                    }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="'/ConTainer/shop'">
                <template slot="title">
                    <i class="el-icon-location  blue"></i>
                    <span class="chap">{{ $t('navbar.storemanagement') }} </span>
                </template>
                <el-menu-item-group>
                    <el-menu-item :index="'/ConTainer/shop'">{{ $t('navbar.storemanagement')
                    }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="'/ConTainer/productlist'">
                <template slot="title">
                    <i class="el-icon-location  blue"></i>
                    <span class="chap">{{ $t('navbar.merchandisecontrol') }} </span>
                </template>
                <el-menu-item-group>
                    <el-menu-item :index="'/ConTainer/productlist'">{{ $t('navbar.attributedefinition')
                    }}</el-menu-item>
                    <el-menu-item :index="'/ConTainer/stencil'">{{ $t('navbar.specificationtemplate') }}</el-menu-item>
                    <el-menu-item :index="'/ConTainer/listbox'">{{ $t('navbar.commoditylist') }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="'/ConTainer/setup'">
                <template slot="title">
                    <i class="el-icon-location  blue"></i>
                    <span class="chap">{{ $t('navbar.advancedsettings') }} </span>
                </template>
                <el-menu-item-group>
                    <el-menu-item :index="'/ConTainer/setup'">{{ $t('navbar.advancedsettings')
                    }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="'/ConTainer/system'">
                <template slot="title">
                    <i class="el-icon-location  blue"></i>
                    <span class="chap">{{ $t('navbar.systemmanagement') }} </span>
                </template>
                <el-menu-item-group>
                    <el-menu-item :index="'/ConTainer/system'">{{ $t('navbar.systemmanagement')
                    }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="'/ConTainer/management'">
                <template slot="title">
                    <i class="el-icon-location  blue"></i>
                    <span class="chap">{{ $t('navbar.settlementmanagement') }} </span>
                </template>
                <el-menu-item-group>
                    <el-menu-item :index="'/ConTainer/management'">{{ $t('navbar.settlementmanagement')
                    }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="'/ConTainer/integrator'">
                <template slot="title">
                    <i class="el-icon-location  blue"></i>
                    <span class="chap">{{ $t('navbar.systemintegrationsetup') }} </span>
                </template>
                <el-menu-item-group>
                    <el-menu-item :index="'/ConTainer/integrator'">{{ $t('navbar.systemintegrationsetup')
                    }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="'/ConTainer/analysis'">
                <template slot="title">
                    <i class="el-icon-location  blue"></i>
                    <span class="chap">{{ $t('navbar.statisticalanalysis') }} </span>
                </template>
                <el-menu-item-group>
                    <el-menu-item :index="'/ConTainer/analysis'">{{ $t('navbar.fundorderinquiry')
                    }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="'/ConTainer/Orderdetails'">
                <template slot="title">
                    <i class="el-icon-location  blue"></i>
                    <span class="chap">{{ $t('navbar.ordermanagement') }} </span>
                </template>
                <el-menu-item-group>
                    <el-menu-item :index="'/ConTainer/Orderdetailsone'">{{ $t('navbar.orderdetails')
                    }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>

    </div>
</template>

<script>

import { mapState } from "vuex";
export default {
    name: "navmenu",
    computed: {
        ...mapState('tab', { menu: state => state.menu })
    },
    data() {
        return {
            isCollapse: false,//控制侧边栏收起跟展开
            src: require(`@/assets/images/navigationbarLOG.png`),
            menus: [],
        }
    },
    created() {
        //     this.menus = this.$router.options.routes.slice(9, this.$router.options.routes.length - 1)//拿到静
        // 态路由表
        // console.log(this.$router.options.routes.slice(8, this.$router.options.routes.length - 1), '123');
        //     this.isCollapse = this.menu
        // console.log(this.$route.path, '123');
    },

}
</script>

<style lang="less" scoped>
.el-menu {
    margin: 0px;
    background-color: #fafafa;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 256px;
    min-height: 400px;
}

.el-submenu:hover {
    .blue {

        color: #1890ff;
    }

    .chap {
        color: #282c34;
        font-size: 500;
        font-weight: 900;
    }


    .el-menu-item {
        font-size: 15px !important;
        font-weight: 500;

    }

    /deep/.is-active {
        background-color: #f2f5fa !important;
        font-weight: 560;
    }
}
</style>